import React, {useEffect, useState} from "react";
import {Table, Button, Flex, Pagination, Modal, Input, Form} from 'antd'
import {connect, Link} from "umi";

import style from './index.css'
import UserModal from "@/pages/users/components/UserModal";

const Users = (props) => {
  const {users: {userList, total}, dispatch} = props;
  const [modalVisible, setModalVisible] = useState(false)
  const [record, setRecord] = useState(undefined)
  const [currentPage, setCurrentPage] = useState(1)
  const [queryUsername, setQueryUsername] = useState("")
  const [avatar, setAvatar] = useState(undefined)
  const [address, setAddress] = useState(undefined)

  useEffect(() => {
    dispatch({
      type: 'users/getRemote',
    })
  },[])

  const columns = [
    {
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
      render: text => <a>{text}</a>,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',
      render: text => (
        <img src={text} width="50" />
      )
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <div>
          <Flex gap="small">
            <Button type="primary" size="small" onClick={() => editHandler(record)}>修改</Button>
            <Button type="danger" size="small" onClick={() => showConfirm(record)} className={style.delete}>删除</Button>
            <Link to={{pathname: '/userInfo', state: {id: record.id}}}><Button size="small">详情</Button></Link>
          </Flex>
        </div>
      ),
    },
  ];

  const { confirm } = Modal;

  const showConfirm = (record) => {
    confirm({
      content: '你确定要删除这个用户吗？',
      onOk() {
        dispatch({
          type: 'users/deleteRecord',
          payload: record.id,
        }).then(() => {
          dispatch({
            type: 'users/getRemote',
            payload: currentPage,
          })
        })
      },
      onCancel() {},
      okText: '确定',
      cancelText: '取消',
      centered: true,
    });
  }

  const editHandler = (record) => {
    setModalVisible(true)
    setRecord(record)
  }

  const addHandler = () => {
    setModalVisible(true)
    setRecord(undefined)
  }

  const closeHandler = () => {
    setModalVisible(false)
  }


  const onChange = (page) => {
    setCurrentPage(page)
    dispatch({
      type: 'users/getRemote',
      payload: page,
    })
  }

  const onFinish = (values) => {
    let id = 0
    if(record) {
      id = record.id
    }
    if(id) {
      dispatch({
        type: 'users/editRecord',
        payload: {
          id,
          userName: values.userName,
          name: values.name,
          phone: values.phone,
          gender: values.gender,
          email: values.email,
          avatar: avatar,
          address: address
        },
      }).then(() => {
        setModalVisible(false)
        dispatch({
          type: 'users/getRemote',
          payload: currentPage,
        })
      })

    }else {
      dispatch({
        type: 'users/addRecord',
        payload: {
          userName: values.userName,
          name: values.name,
          phone: values.phone,
          gender: values.gender,
          email: values.email,
          avatar: avatar,
          address: address
        },
      }).then(() => {
        setModalVisible(false)
        dispatch({
          type: 'users/getRemote',
          payload: 1,
        })
      })
    }
  }

  const handleInputChange = (event) => {
    setQueryUsername(event.target.value)
  }

  const handleQuery = () => {
    dispatch({
      type: 'users/getQueryList',
      payload: queryUsername
    })
  }

  const handleReset = () => {
    setQueryUsername("")
    dispatch({
      type: 'users/getRemote',
      payload: 1,
    })
  }

  return (
    <div>
      <div style={{height: "100%"}}>
        {/*<div style={{textAlign: "center",fontSize: "35px" , marginBottom: "10px", height: "75px", width: "100%", background: "#fff", padding: "10px", border: "1px solid #ebeef5", borderRadius: "3px"}}>
          用户管理界面
        </div>*/}
        <div style={{margin: "10px 0", width: "100%", background: "#fff", padding: "10px", border: "1px solid #ebeef5", borderRadius: "3px"}}>
          <Flex gap="small">
            <Input className={style.search} placeholder="请输入用户名" value={queryUsername} onChange={handleInputChange}/>
            <Button type="primary" onClick={handleQuery}>查找</Button>
            <Button onClick={handleReset}>重置</Button>
          </Flex>
        </div>
        <div style={{margin: "10px 0", width: "100%", background: "#fff", padding: "10px", border: "1px solid #ebeef5", borderRadius: "3px"}}>
          <Button className={style.add} onClick={addHandler}>添加</Button>
        </div>
        <div >
          <Table rowKey={record => record.id}  columns={columns} dataSource={userList} pagination={false} />
        </div>
        <UserModal setAddress={setAddress} setAvatar={setAvatar} visible={modalVisible} closeHandler={closeHandler} record={record} onFinish={onFinish}/>
        <div style={{marginTop: "10px"}}>`
          <Pagination current={currentPage} onChange={onChange} total={total} pageSize={5} />
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = ({users}) => {
  return {
    users,
  }
}

export default connect(mapStateToProps)(Users)
